<template>
  <div class="complaint">
    <div class="complaint-header">
      <el-radio-group v-model="radio1" @change="requestData">
        <el-radio-button label="已处理"></el-radio-button>
        <el-radio-button label="处理中"></el-radio-button>
      </el-radio-group>
    </div>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
      :btn1="btn1"
      :btn2="btn2"
      @btn2="handleSee"
    ></table-list>
    <el-dialog title="投诉内容" :visible.sync="dialogFormVisible" width="30%">
      <el-input class="text" type="textarea" v-model="content"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-if="radio1 == '处理中'" @click="overHandle"
          >已处理</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "@/components/common/TableList.vue";
export default {
  data() {
    return {
      dialogFormVisible: false,
      content: "",
      radio1: "已处理",
      tableHeader: [
        { prop: "name", label: "姓名" },
        { prop: "state", label: "类型" },
        { prop: "phone", label: "电话" },
        { prop: "address", label: "地址" },
        { prop: "date", label: "时间" },
        { prop: "content", label: "内容" },
        // { prop: "report_time", label: "上报时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 1,
        delete: 0,
        edit: 1,
      },
      btn1: "删除",
      btn2: "查看",
      seeId: "",
    };
  },
  components: {
    TableList,
  },
  created() {
    this.requestData();
  },

  methods: {
    requestData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        this.$request({
          url: "/b-repaire", //传入confing,在baseURL后面的值
        })
          .then((res) => {
            console.log(res);
            if (this.radio1 == "已处理") {
              // this.deleteEdit.options = 0;
              this.tableData = res.data.data.filter((s) => {
                return s.all_state == 1;
              });
              this.tableData = this.tableData.map((s) => {
                if (s.phone < 0) {
                  s.phone = "五";
                }
                return s;
              });
            } else if (this.radio1 == "处理中") {
              // this.deleteEdit.options = 1;
              this.tableData = res.data.data.filter((s) => s.all_state < 0); //获得已上报状态

              this.tableData = this.tableData.map((s) => {
                if (s.phone < 0) {
                  s.phone = "无";
                }
                return s;
              });
            }

            // console.log(this.tableData);
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    handleSee(row) {
      console.log(1);
      console.log(row);
      this.dialogFormVisible = true;
      let content = this.tableData.filter((s) => {
        return s.id == row.id;
      });
      this.seeId = row.id;
      this.content = content[0].content;
    },
    overHandle() {
      console.log(this.seeId);
      this.$request({
        url: "/up_repaire",
        method: "POST",
        data: {
          id: this.seeId,
        },
      }).then((res) => {
        console.log(res);
        this.dialogFormVisible = false;
        this.requestData();
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.complaint {
  width: 100%;

  .complaint-header {
    margin-top: 20px;
    padding: 0 20px;
  }
  .text {
    .el-textarea__inner {
      min-height: 150px !important;
    }
  }
}
</style>
